<template>
  <a-drawer
    :title="$t('all.autotext1605')"
    placement="right"
    width="80%"
    :visible="visible"
    @close="onClose"
    v-if="content"
  >
    <div class="form-item-title">{{ $t('all.autotext1597') }}</div>
    <a-descriptions :column="{ md: 4 }">
      <a-descriptions-item :label="$t('all.autotext1574')">{{ content.title }}</a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1573')"> {{ content.typeName }} </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1599')"> {{ content.statusName }} </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1606')"> {{ content.createName }} </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1607')"> {{ content.phone }} </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1608')"> {{ content.email }} </a-descriptions-item>
    </a-descriptions>

    <div class="form-item-title">{{ $t('all.autotext1576') }}</div>
    <div class="font-item-content">
      <div class="content-html" v-html="htmlText"></div>
      <div class="content-piclist">
        <div v-for="(item,id) in pictureList" :key="id">
          <img
            :src="item.url"
            style="max-height: 250px; margin-right: 10px; float: left; overflow: auto"
          />
        </div>
      </div>
    </div>

    <div class="content-wrap" v-if="content.status == 1 ? true:false">
      <div class="form-item-title">{{ $t('all.autotext1602') }}</div>
      <a-input
        v-model="content.replyContent"
        :placeholder="$t('all.autotext1603')"
        type="textarea"
        :maxLength="100"
        allow-clear
        :auto-size="{ minRows: 5, maxRows: 8 }"
        v-decorator="['replyContent', { rules: [{ required: true, message: $t('all.autotext1603') }] }]"
      />
    </div>

    <div class="content-wrap" v-if="content.status == 2 ? true:false">
      <div class="form-item-title">{{ $t('all.autotext1601') }}</div>
      <div class="content-main">
        <div class="content-text">
          {{ $t('all.autotext1602') }}：{{ content.replyContent }}
        </div>
        <div class="content-text">
          {{ $t('all.autotext1604') }}：{{ content.replyTime | moment('YYYY-MM-DD HH:mm') }}
        </div>
      </div>
    </div>

    <div class="content-wrap last">
      <a-button v-if="content.status == 0 ? true:false" type="primary" @click="clickConfirmStatus">
        {{ $t('all.autotext1609') }}
      </a-button>
      <a-button v-if="content.status == 1 ? true:false" type="primary" @click="clickSureStatus">
        {{ $t('all.autotext1610') }}
      </a-button>
      <a-button @click="onClose" style="margin-left:10px">
        {{ $t('all.autotext1578') }}
      </a-button>
    </div>
  </a-drawer>
</template>
<script>
import { confirmStatus, confirmReply, getDetails } from '@/api/feedback/feedback'
export default {
  data () {
    return {
      visible: false,
      content: undefined,
      pictureList: [],
      htmlText: ''
    }
  },
  methods: {
    // 打开弹窗
    open (id) {
      this.visible = true
      this.getDetails(id)
    },
    // 拿到详情
    async getDetails (id) {
      const record = await getDetails({ id })
      this.content = record
      this.htmlText = record.content
      let picArray = record.pictures.split(',')
      for (let i = 0; i < picArray.length; i++) {
        let pictureitem = {
          id: i,
          url: process.env.VUE_APP_BASE_IMAGE + picArray[i]
        }
        this.pictureList.push(pictureitem)
      }
    },
    // 关闭弹窗
    onClose () {
      this.visible = false
      this.$emit('close')
    },
    clickConfirmStatus () {
      confirmStatus({
        id: this.content.id
      }).then(res => {
        this.$message.success(this.$t('all.autotext1586'))
        this.$emit('ok')
        this.onClose()
      }).finally(res => {

      })
    },
    clickSureStatus () {
      if (!(this.content.replyContent && this.content.replyContent.replace(/\s+/g, '').length)) {
        this.$message.error(this.$t('all.autotext1603'))
        return
      }
      let parameter = {
        id: this.content.id,
        replyContent: this.content.replyContent
      }
      confirmReply(parameter)
        .then((res) => {
          this.$message.success(this.$t('all.autotext1586'))
          this.$emit('ok')
          this.onClose()
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
.last{
  position: fixed;
  bottom:20px;
  left:0;
  right:40px;
  height: 60px;
  display: flex;
  justify-content: flex-end;
}
  .form-item-title{
    width: 100%;
    font-size: 12pt;
    font-weight: bold;
    margin:30px 0 30px 0;
    clear:both;
  }
  .font-item-content {
    width: 100%;
    margin:30px 0 30px 0;
    clear:both;
  }
/deep/ .ant-descriptions-title {
  font-size: 14px;
  color: #031F47;
  font-weight: normal;
  margin-bottom: 12px;
}
/deep/ .ant-descriptions-row {
  background: #F6F9FB;
  .ant-descriptions-item {
    padding: 10px 20px;
    color: #687991;
  }
  .ant-descriptions-item-label {
    width: 100px;
    color: #687991;
  }
  .ant-descriptions-item-content {
    color: #687991;
  }
}
.content-wrap {
  margin-top: 24px;
}
.content-main {
  width:100%;
  background: #F6F9FB;
  padding: 20px;
  overflow-y: scroll;
  .content-time {
    color: #687991;
  }
  .content-text {
    width: 100%;
    max-height: 400px;
    overflow-y: scroll;
    ::v-deep img{
      width: 100%;
    }
  }
}
.content-html {
  width: 100%;
  margin-top: 10px;
  max-height: 400px;
  overflow-y: scroll;
  ::v-deep img{
    width: 100%;
  }
}
.content-piclist {
  width: 100%;
  max-height: 200px;
  overflow-y: scroll;
}
</style>
